<!DOCTYPE html>
<html>
    <head>
        <title>demo</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/three.js/73/three.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/0.11.0/Tween.min.js"></script>
		<script src="https://unpkg.com/three@0.73.1/examples/js/controls/TrackballControls.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/stats.js/10/Stats.min.js"></script>
        <script>

            var jsonstr = '[{"boxId":"9851960120001_spu-REP-INNER-21502507-1-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40-41-42-43-44-45-46-47-48-49-50-51-52-53-54-55-56-57-58-59-60-61-62-63-64-65-66-67-68-69-70-71-72-73-74","x":-49.400002,"y":-83.500000,"z":-476.500000,"width":133.000000,"height":93.000000,"length":239.000000,"weight":200.000000,"platform":"platform09","order":1,"material":"","type":1,"place":100},{"boxId":"9819539190001_C000T028549J00-2_1","x":-58.400002,"y":23.150000,"z":-557.500000,"width":77.000000,"height":120.300003,"length":115.000000,"weight":114.800003,"platform":"platform16","order":2,"material":"","type":1,"place":200},{"boxId":"9819539190001_C000T028549J00-2_0","x":-58.400002,"y":23.150000,"z":-480.500000,"width":77.000000,"height":120.300003,"length":115.000000,"weight":114.800003,"platform":"platform16","order":3,"material":"","type":1,"place":200},{"boxId":"9819539190001_C000T028549J00-1_0","x":-58.400002,"y":23.150000,"z":-403.500000,"width":77.000000,"height":120.300003,"length":115.000000,"weight":114.800003,"platform":"platform16","order":4,"material":"","type":1,"place":200},{"boxId":"9858603950001_C260T016829J00_0","x":-88.400002,"y":94.550003,"z":-569.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":9.080000,"platform":"platform16","order":5,"material":"","type":1,"place":200},{"boxId":"9858603090001_C260T016829J00_0","x":-33.400002,"y":94.550003,"z":-569.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":9.080000,"platform":"platform16","order":6,"material":"","type":1,"place":200},{"boxId":"9858604400001_5120T000117J00-2_0","x":-88.400002,"y":94.550003,"z":-516.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.920000,"platform":"platform16","order":7,"material":"","type":1,"place":200},{"boxId":"94267840T005886","x":-33.400002,"y":94.550003,"z":-516.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.900000,"platform":"platform16","order":8,"material":"","type":1,"place":200},{"boxId":"94267840T005885","x":-88.400002,"y":94.550003,"z":-463.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.900000,"platform":"platform16","order":9,"material":"","type":1,"place":200},{"boxId":"94267840T005883","x":-33.400002,"y":94.550003,"z":-463.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.900000,"platform":"platform16","order":10,"material":"","type":1,"place":200},{"boxId":"94267840T005882","x":-88.400002,"y":117.050003,"z":-569.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.900000,"platform":"platform16","order":11,"material":"","type":1,"place":200},{"boxId":"9856676000001_4840T001395J00_1","x":-33.400002,"y":117.050003,"z":-569.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.880000,"platform":"platform16","order":12,"material":"","type":1,"place":200},{"boxId":"9856676000001_4840T001395J00_0","x":-88.400002,"y":117.050003,"z":-516.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.880000,"platform":"platform16","order":13,"material":"","type":1,"place":200},{"boxId":"9856676010001_4840T001395J00_1","x":-33.400002,"y":117.050003,"z":-516.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.880000,"platform":"platform16","order":14,"material":"","type":1,"place":200},{"boxId":"9856676010001_4840T001395J00_0","x":-88.400002,"y":117.050003,"z":-463.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.880000,"platform":"platform16","order":15,"material":"","type":1,"place":200},{"boxId":"9856676780001_4840T001395J00_1","x":-33.400002,"y":117.050003,"z":-463.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.880000,"platform":"platform16","order":16,"material":"","type":1,"place":200},{"boxId":"9858603600001_spu-REP-INNER-06170324-1","x":8.050000,"y":-23.250000,"z":-582.000000,"width":17.900000,"height":27.500000,"length":28.000000,"weight":2.300000,"platform":"platform16","order":17,"material":"","type":1,"place":100},{"boxId":"9858602540001_5860T000027J00_0","x":7.850000,"y":-6.750000,"z":-583.000000,"width":17.500000,"height":5.500000,"length":26.000000,"weight":0.440000,"platform":"platform16","order":18,"material":"","type":1,"place":100},{"boxId":"9858603600001_6040T901897J00-2_0","x":57.099998,"y":-86.750000,"z":-536.000000,"width":80.000000,"height":86.500000,"length":120.000000,"weight":92.400002,"platform":"platform16","order":19,"material":"","type":1,"place":100},{"boxId":"9858603600001_6040T901897J00-1_0","x":57.099998,"y":-0.250000,"z":-536.000000,"width":80.000000,"height":86.500000,"length":120.000000,"weight":92.400002,"platform":"platform16","order":20,"material":"","type":1,"place":100},{"boxId":"9819539190001_C000T9N4293J00-3_0","x":55.599998,"y":85.500000,"z":-538.500000,"width":77.000000,"height":85.000000,"length":115.000000,"weight":84.000000,"platform":"platform16","order":21,"material":"","type":1,"place":100},{"boxId":"9855893750001_4580T000056J00_0","x":63.099998,"y":-101.599998,"z":-430.000000,"width":92.000000,"height":56.799999,"length":92.000000,"weight":73.800003,"platform":"platform16","order":22,"material":"","type":1,"place":100},{"boxId":"94267840T005309","x":57.099998,"y":-31.450001,"z":-446.000000,"width":60.000000,"height":83.500000,"length":80.000000,"weight":31.799999,"platform":"platform16","order":23,"material":"","type":1,"place":200},{"boxId":"9819539190001_0310T800049J00-1_0","x":56.200001,"y":29.299999,"z":-449.899994,"width":52.200001,"height":38.000000,"length":78.199997,"weight":11.600000,"platform":"platform16","order":24,"material":"","type":1,"place":200},{"boxId":"9858603600001_spu-REP-MIDDLE-06170311-","x":49.349998,"y":60.099998,"z":-452.899994,"width":46.200001,"height":23.600000,"length":64.500000,"weight":14.300000,"platform":"platform16","order":25,"material":"","type":1,"place":200},{"boxId":"9819539190001_3800191C007P0400500-5_0","x":47.099998,"y":89.650002,"z":-456.000000,"width":40.000000,"height":35.500000,"length":60.000000,"weight":12.300000,"platform":"platform16","order":26,"material":"","type":1,"place":200},{"boxId":"9854693010001_C26010LU557P0500800-2_0","x":35.849998,"y":116.150002,"z":-457.750000,"width":36.500000,"height":17.500000,"length":37.500000,"weight":8.400000,"platform":"platform16","order":27,"material":"","type":1,"place":200},{"boxId":"9858502370002_2500T001265J00_0","x":-80.400002,"y":92.050003,"z":-409.500000,"width":55.000000,"height":17.500000,"length":71.000000,"weight":7.660000,"platform":"platform16","order":28,"material":"","type":1,"place":200},{"boxId":"9858502370001_2500T001265J00_0","x":-80.400002,"y":109.550003,"z":-409.500000,"width":55.000000,"height":17.500000,"length":71.000000,"weight":7.660000,"platform":"platform16","order":29,"material":"","type":1,"place":200},{"boxId":"9858603600001_2500T800825J00-3_0","x":-96.650002,"y":123.300003,"z":-419.250000,"width":35.500000,"height":10.000000,"length":38.500000,"weight":1.940000,"platform":"platform16","order":30,"material":"","type":1,"place":200},{"boxId":"9858502370001_4840T001128J00-1_0","x":-64.400002,"y":121.050003,"z":-425.250000,"width":23.500000,"height":5.500000,"length":26.000000,"weight":0.300000,"platform":"platform16","order":31,"material":"","type":1,"place":200},{"boxId":"9858502370002_4840T001128J00-1_0","x":-64.400002,"y":126.550003,"z":-425.250000,"width":23.500000,"height":5.500000,"length":26.000000,"weight":0.300000,"platform":"platform16","order":32,"material":"","type":1,"place":200},{"boxId":"9845218520001_5910191S456P0400700_0","x":-26.150000,"y":98.300003,"z":-412.250000,"width":37.500000,"height":30.000000,"length":49.500000,"weight":6.100000,"platform":"platform16","order":33,"material":"","type":1,"place":100},{"boxId":"9858502370002_2500T001264J00_0","x":-27.150000,"y":118.300003,"z":-417.750000,"width":35.500000,"height":10.000000,"length":38.500000,"weight":1.740000,"platform":"platform16","order":34,"material":"","type":1,"place":100},{"boxId":"9855893830001_2500T000267J00-1_0","x":-65.900002,"y":-71.250000,"z":-297.000000,"width":100.000000,"height":117.500000,"length":120.000000,"weight":184.800003,"platform":"platform16","order":35,"material":"","type":1,"place":100},{"boxId":"9855893830001_2500T000267J00-2_2","x":-65.900002,"y":-71.250000,"z":-177.000000,"width":100.000000,"height":117.500000,"length":120.000000,"weight":184.800003,"platform":"platform16","order":36,"material":"","type":1,"place":100},{"boxId":"9855893830001_2500T000267J00-2_1","x":-65.900002,"y":-71.250000,"z":-57.000000,"width":100.000000,"height":117.500000,"length":120.000000,"weight":184.800003,"platform":"platform16","order":37,"material":"","type":1,"place":100},{"boxId":"9855893830001_2500T000267J00-2_0","x":-65.900002,"y":-71.250000,"z":63.000000,"width":100.000000,"height":117.500000,"length":120.000000,"weight":184.800003,"platform":"platform16","order":38,"material":"","type":1,"place":100},{"boxId":"9855893830001_C000T9C8272J00-3_0","x":-75.900002,"y":26.250000,"z":-297.000000,"width":80.000000,"height":77.500000,"length":120.000000,"weight":89.000000,"platform":"platform16","order":39,"material":"","type":1,"place":100},{"boxId":"9858603600001_2760T900461J00-1_0","x":-75.900002,"y":26.250000,"z":-177.000000,"width":80.000000,"height":77.500000,"length":120.000000,"weight":79.599998,"platform":"platform16","order":40,"material":"","type":1,"place":100},{"boxId":"9858603600001_0500T900313J00-4_0","x":-95.150002,"y":89.750000,"z":-316.250000,"width":41.500000,"height":49.500000,"length":81.500000,"weight":54.200001,"platform":"platform16","order":41,"material":"","type":1,"place":100},{"boxId":"9858502370001_2500T001264J00_0","x":-98.150002,"y":119.500000,"z":-337.750000,"width":35.500000,"height":10.000000,"length":38.500000,"weight":1.740000,"platform":"platform16","order":42,"material":"","type":1,"place":100},{"boxId":"9858602540001_2500T001262J00_0","x":-98.150002,"y":119.500000,"z":-299.250000,"width":35.500000,"height":10.000000,"length":38.500000,"weight":1.740000,"platform":"platform16","order":43,"material":"","type":1,"place":100},{"boxId":"9858603600001_2760T900470J01-2_0","x":-56.150002,"y":73.750000,"z":-338.250000,"width":36.500000,"height":17.500000,"length":37.500000,"weight":4.620000,"platform":"platform16","order":44,"material":"","type":1,"place":100},{"boxId":"9855893750001_7840T908639J00_0","x":-56.150002,"y":73.750000,"z":-300.750000,"width":36.500000,"height":17.500000,"length":37.500000,"weight":1.900000,"platform":"platform16","order":45,"material":"","type":1,"place":100},{"boxId":"9854693010001_00I69207027491947472-2_0","x":-56.400002,"y":94.250000,"z":-338.500000,"width":36.000000,"height":23.500000,"length":37.000000,"weight":3.000000,"platform":"platform16","order":46,"material":"","type":1,"place":100},{"boxId":"9854693010001_6430T000167J00-1_0","x":39.099998,"y":-88.199997,"z":-302.000000,"width":110.000000,"height":83.599998,"length":110.000000,"weight":116.599998,"platform":"platform16","order":47,"material":"","type":1,"place":100},{"boxId":"9855893750001_4580T000057J00_0","x":30.100000,"y":-18.350000,"z":-311.000000,"width":92.000000,"height":56.099998,"length":92.000000,"weight":65.000000,"platform":"platform16","order":48,"material":"","type":1,"place":100},{"boxId":"9845218520001_0120T000030J00_0","x":23.850000,"y":50.849998,"z":-327.000000,"width":60.000000,"height":82.300003,"length":79.500000,"weight":36.000000,"platform":"platform16","order":49,"material":"","type":1,"place":200},{"boxId":"9858602540001_2500T001263J00_0","x":19.600000,"y":100.750000,"z":-329.500000,"width":55.000000,"height":17.500000,"length":71.000000,"weight":7.660000,"platform":"platform16","order":50,"material":"","type":1,"place":200},{"boxId":"9858601880001_4840T000944J00-1_0","x":2.850000,"y":118.250000,"z":-338.750000,"width":36.500000,"height":17.500000,"length":37.500000,"weight":1.320000,"platform":"platform16","order":51,"material":"","type":1,"place":200},{"boxId":"9819539190001_00J69207027170223349-2_0","x":-95.650002,"y":84.250000,"z":-236.250000,"width":40.500000,"height":38.500000,"length":78.500000,"weight":32.400002,"platform":"platform16","order":52,"material":"","type":1,"place":100},{"boxId":"9819539190001_27601013763P0400500-4_0","x":24.100000,"y":-87.750000,"z":-187.000000,"width":80.000000,"height":84.500000,"length":120.000000,"weight":138.000000,"platform":"platform16","order":53,"material":"","type":1,"place":100},{"boxId":"9854693010001_5280T006391J00-1_0","x":4.350000,"y":-8.750000,"z":-207.750000,"width":40.500000,"height":73.500000,"length":78.500000,"weight":25.799999,"platform":"platform16","order":54,"material":"","type":1,"place":100},{"boxId":"9834496730001_00J69207027020018532_0","x":3.850000,"y":45.250000,"z":-227.250000,"width":39.500000,"height":34.500000,"length":39.500000,"weight":5.040000,"platform":"platform16","order":55,"material":"","type":1,"place":100},{"boxId":"9856676780001_4840T001395J00_0","x":-89.400002,"y":76.250000,"z":-169.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":8.880000,"platform":"platform16","order":56,"material":"","type":1,"place":100},{"boxId":"9858601880001_7240T001696J01-1_0","x":24.100000,"y":-92.250000,"z":-67.000000,"width":80.000000,"height":75.500000,"length":120.000000,"weight":64.400002,"platform":"platform16","order":57,"material":"","type":1,"place":100},{"boxId":"9858604400001_0760T001488J00-1_0","x":-75.900002,"y":25.000000,"z":-57.000000,"width":80.000000,"height":75.000000,"length":120.000000,"weight":80.199997,"platform":"platform16","order":58,"material":"","type":1,"place":100},{"boxId":"94267840T005884","x":39.099998,"y":-99.500000,"z":48.000000,"width":110.000000,"height":61.000000,"length":110.000000,"weight":98.400002,"platform":"platform16","order":59,"material":"","type":1,"place":100},{"boxId":"9819538780001_0500191G364P0400500-8_0","x":-54.400002,"y":-77.500000,"z":254.500000,"width":123.000000,"height":105.000000,"length":263.000000,"weight":467.000000,"platform":"platform07","order":60,"material":"","type":1,"place":100},{"boxId":"9819538780001_7780100Q657P0400500-3_0","x":-61.400002,"y":26.000000,"z":252.500000,"width":109.000000,"height":102.000000,"length":259.000000,"weight":645.000000,"platform":"platform07","order":61,"material":"","type":1,"place":100},{"boxId":"9819546920001_00J69207027170010781-3_0","x":32.500000,"y":114.099998,"z":-348.350006,"width":17.299999,"height":9.200000,"length":21.799999,"weight":0.300000,"platform":"platform04","order":62,"material":"","type":1,"place":200},{"boxId":"9819546920002_00J69207027170010781-3_0","x":32.500000,"y":114.099998,"z":-331.049988,"width":17.299999,"height":9.200000,"length":21.799999,"weight":0.300000,"platform":"platform04","order":63,"material":"","type":1,"place":200},{"boxId":"9841166510002_6820100Q010P0400501_0","x":30.350000,"y":121.449997,"z":-344.000000,"width":17.500000,"height":5.500000,"length":26.000000,"weight":0.300000,"platform":"platform04","order":64,"material":"","type":1,"place":100},{"boxId":"9841166510001_6820100Q010P0400501_0","x":30.350000,"y":126.949997,"z":-344.000000,"width":17.500000,"height":5.500000,"length":26.000000,"weight":0.300000,"platform":"platform04","order":65,"material":"","type":1,"place":100},{"boxId":"9819546920001_00J69207027210205090-1_0","x":84.099998,"y":-42.400002,"z":-328.000000,"width":16.000000,"height":8.000000,"length":58.000000,"weight":3.200000,"platform":"platform04","order":66,"material":"","type":1,"place":100},{"boxId":"9819546920002_00J69207027210205090-1_0","x":84.099998,"y":-34.400002,"z":-328.000000,"width":16.000000,"height":8.000000,"length":58.000000,"weight":3.200000,"platform":"platform04","order":67,"material":"","type":1,"place":100},{"boxId":"9819543140001_63401913343P0400500-3_0","x":-97.650002,"y":112.250000,"z":-256.750000,"width":36.500000,"height":17.500000,"length":37.500000,"weight":9.900000,"platform":"platform04","order":68,"material":"","type":1,"place":100},{"boxId":"9819543140002_63401913343P0400500-3_0","x":-97.650002,"y":112.250000,"z":-219.250000,"width":36.500000,"height":17.500000,"length":37.500000,"weight":9.900000,"platform":"platform04","order":69,"material":"","type":1,"place":100},{"boxId":"9819543140001_1040100G896P0400702-2_0","x":43.599998,"y":-27.750000,"z":-220.500000,"width":38.000000,"height":35.500000,"length":53.000000,"weight":15.000000,"platform":"platform04","order":70,"material":"","type":1,"place":100},{"boxId":"9819543140002_1040100G896P0400702-2_0","x":43.599998,"y":7.750000,"z":-220.500000,"width":38.000000,"height":35.500000,"length":53.000000,"weight":15.000000,"platform":"platform04","order":71,"material":"","type":1,"place":100},{"boxId":"9819546920002_C000195E380P0500800-2_0","x":42.349998,"y":30.500000,"z":-227.750000,"width":35.500000,"height":10.000000,"length":38.500000,"weight":1.300000,"platform":"platform04","order":72,"material":"","type":1,"place":100},{"boxId":"9819546920001_C000195E380P0500800-2_0","x":42.349998,"y":40.500000,"z":-227.750000,"width":35.500000,"height":10.000000,"length":38.500000,"weight":1.300000,"platform":"platform04","order":73,"material":"","type":1,"place":100},{"boxId":"9841166390001_45801925191P0400500-4_0","x":39.349998,"y":50.500000,"z":-228.500000,"width":29.500000,"height":10.000000,"length":37.000000,"weight":1.250000,"platform":"platform04","order":74,"material":"","type":1,"place":100},{"boxId":"9841166390002_45801925191P0400500-4_0","x":39.349998,"y":60.500000,"z":-228.500000,"width":29.500000,"height":10.000000,"length":37.000000,"weight":1.250000,"platform":"platform04","order":75,"material":"","type":1,"place":100},{"boxId":"9819543140001_00J69207027310056808-5_0","x":-97.150002,"y":105.000000,"z":-178.250000,"width":37.500000,"height":35.000000,"length":37.500000,"weight":3.250000,"platform":"platform04","order":76,"material":"","type":1,"place":100},{"boxId":"9860617510001_5660101L586P0400500_0","x":43.349998,"y":-40.750000,"z":-182.750000,"width":22.500000,"height":9.500000,"length":37.500000,"weight":0.920000,"platform":"platform04","order":77,"material":"","type":1,"place":200},{"boxId":"9841166390002_C170101G240P0500700-3_0","x":-82.150002,"y":95.250000,"z":167.750000,"width":67.500000,"height":36.500000,"length":89.500000,"weight":31.200001,"platform":"platform04","order":78,"material":"","type":1,"place":100},{"boxId":"9841166390001_C170101G240P0500700-3_0","x":-82.150002,"y":95.250000,"z":257.250000,"width":67.500000,"height":36.500000,"length":89.500000,"weight":31.200001,"platform":"platform04","order":79,"material":"","type":1,"place":100},{"boxId":"9819543140002_00I69207027422453047-4_0","x":-85.900002,"y":118.000000,"z":160.750000,"width":60.000000,"height":9.000000,"length":75.500000,"weight":22.500000,"platform":"platform04","order":80,"material":"","type":1,"place":100},{"boxId":"9819543140001_00I69207027422453047-4_0","x":-85.900002,"y":118.000000,"z":236.250000,"width":60.000000,"height":9.000000,"length":75.500000,"weight":22.500000,"platform":"platform04","order":81,"material":"","type":1,"place":100},{"boxId":"9819543140002_00J69207027310056808-5_0","x":-29.650000,"y":94.500000,"z":141.750000,"width":37.500000,"height":35.000000,"length":37.500000,"weight":3.250000,"platform":"platform04","order":82,"material":"","type":1,"place":100},{"boxId":"9819543140001_0320191C213-1_0","x":43.099998,"y":-88.000000,"z":239.000000,"width":72.000000,"height":84.000000,"length":232.000000,"weight":143.000000,"platform":"platform04","order":83,"material":"","type":1,"place":100},{"boxId":"9819543140002_0320191C213-1_0","x":43.099998,"y":-4.000000,"z":239.000000,"width":72.000000,"height":84.000000,"length":232.000000,"weight":143.000000,"platform":"platform04","order":84,"material":"","type":1,"place":100},{"boxId":"9841166510001_6820100Q009P0400501_0","x":43.099998,"y":80.000000,"z":239.000000,"width":72.000000,"height":84.000000,"length":232.000000,"weight":143.000000,"platform":"platform04","order":85,"material":"","type":1,"place":100},{"boxId":"9819546920001_6430191H670P0400500_0","x":-89.400002,"y":88.250000,"z":329.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":10.555000,"platform":"platform04","order":86,"material":"","type":1,"place":100},{"boxId":"9819546920002_4580100S863P0400500_0","x":-89.400002,"y":110.750000,"z":329.500000,"width":53.000000,"height":22.500000,"length":55.000000,"weight":10.505000,"platform":"platform04","order":87,"material":"","type":1,"place":100},{"boxId":"9841166390001_6820100Q754P0400500-2_0","x":-55.900002,"y":-92.500000,"z":426.000000,"width":80.000000,"height":75.000000,"length":120.000000,"weight":74.800003,"platform":"platform04","order":88,"material":"","type":1,"place":200},{"boxId":"9841166390002_6820100Q754P0400500-2_0","x":-55.900002,"y":-92.500000,"z":506.000000,"width":80.000000,"height":75.000000,"length":120.000000,"weight":74.800003,"platform":"platform04","order":89,"material":"","type":1,"place":200},{"boxId":"9841166390001_00I69207027441491792_0","x":-72.150002,"y":-14.500000,"z":415.250000,"width":58.500000,"height":81.000000,"length":87.500000,"weight":101.000000,"platform":"platform04","order":90,"material":"","type":1,"place":200},{"boxId":"9841166390002_00I69207027441491792_0","x":-72.150002,"y":-14.500000,"z":473.750000,"width":58.500000,"height":81.000000,"length":87.500000,"weight":101.000000,"platform":"platform04","order":91,"material":"","type":1,"place":200},{"boxId":"9841166510001_6820100Q008_0","x":-85.550003,"y":63.900002,"z":427.450012,"width":60.700001,"height":75.800003,"length":82.900002,"weight":79.000000,"platform":"platform04","order":92,"material":"","type":1,"place":100},{"boxId":"9841166510004_6820100P604P0400500-1_0","x":-87.400002,"y":115.550003,"z":417.250000,"width":57.000000,"height":27.500000,"length":62.500000,"weight":7.200000,"platform":"platform04","order":93,"material":"","type":1,"place":100},{"boxId":"9819543140002_2320100F068_0","x":34.849998,"y":-97.900002,"z":418.000000,"width":61.500000,"height":64.199997,"length":64.000000,"weight":65.852997,"platform":"platform04","order":94,"material":"","type":1,"place":100},{"boxId":"9819543140001_2320100F068_0","x":34.849998,"y":-97.900002,"z":482.000000,"width":61.500000,"height":64.199997,"length":64.000000,"weight":65.852997,"platform":"platform04","order":95,"material":"","type":1,"place":100},{"boxId":"9841166510002_6820100Q008_0","x":34.450001,"y":-27.900000,"z":427.450012,"width":60.700001,"height":75.800003,"length":82.900002,"weight":79.000000,"platform":"platform04","order":96,"material":"","type":1,"place":100},{"boxId":"9841166510003_77801025908P0400500_0","x":32.599998,"y":18.750000,"z":418.500000,"width":57.000000,"height":17.500000,"length":65.000000,"weight":5.750000,"platform":"platform04","order":97,"material":"","type":1,"place":100}]';
			var jsonstr2 = '{"container_length":1192.000000,"container_width":231.800003,"container_height":260.000000,"container_max_load":23000.000000,"container_type_name":"40HQ"}'
            var objectArray= JSON.parse(jsonstr);
			var truckJsonObj = JSON.parse(jsonstr2);
            var container, stats;
            var camera, controls, scene, projector, renderer;
            var objects = [], plane;
            var mouse = new THREE.Vector2(), offset = new THREE.Vector3(), INTERSECTED, SELECTED; 
            init();
            animate();
            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.x = -600;
                camera.position.y = 400;
                camera.position.z = 1000;
                controls = new THREE.TrackballControls( camera );
                controls.rotateSpeed = 1.0;
                controls.zoomSpeed = 1.2;
                controls.panSpeed = 0.8;
                controls.noZoom = false;
                controls.noPan = true;
                controls.staticMoving = false;
                controls.dynamicDampingFactor = 0.3;
                scene = new THREE.Scene();
                var ambientLight = new THREE.AmbientLight( Math.random() *0xffffff );
                scene.add( ambientLight );
                var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
                directionalLight.position.set( 0, 1, 0 );
                scene.add( directionalLight );
                var pointLight = new THREE.PointLight( 0xff0000, 1, 500 );
                pointLight.position.set( 0, 0, -200 );
                scene.add( pointLight );

                container_length = truckJsonObj.container_length;
                container_width = truckJsonObj.container_width;
                container_height = truckJsonObj.container_height;
                var cube_1 = new THREE.Mesh(
                    new THREE.BoxGeometry( container_width, container_height, container_length, 1,1,1 ), 
                    new THREE.MeshBasicMaterial( { color:0xefb73e, wireframe:true } )
                );
                cube_1.position.x = 0;
                cube_1.position.y = 0;
                cube_1.position.z = 0;
                scene.add( cube_1 );

                truck_head_length = 145;
                var truck_head_1 = new THREE.Mesh(
                    new THREE.BoxGeometry( 200, 100, truck_head_length, 1, 1, 5 ), 
                    new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe:true } )
                );
                truck_head_1.position.x = 0;
                truck_head_1.position.y = -50;
                truck_head_1.position.z = -(container_length/2 + truck_head_length/2);
                scene.add( truck_head_1 );
                
                truck_head_length_2 = 80;
                var truck_head_2 = new THREE.Mesh(
                    new THREE.BoxGeometry( 170, 60, truck_head_length_2, 1, 0, 5 ), 
                    new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe:true } )
                );
                truck_head_2.position.x = 0;
                truck_head_2.position.y = 30;
                truck_head_2.position.z = -(container_length/2 + truck_head_length_2/2);
                scene.add( truck_head_2 );
                
                truck_head_chimney_radius = 7;
                var truck_head_chimney1 = new THREE.Mesh(
                    new THREE.CylinderGeometry( truck_head_chimney_radius, truck_head_chimney_radius, 300, 20 ), 
                    new THREE.MeshBasicMaterial( { color:0xffffff, wireframe:true } )
                );
                truck_head_chimney1.position.x = 100;
                truck_head_chimney1.position.y = 50;
                truck_head_chimney1.position.z = -(container_length/2 + truck_head_chimney_radius/2);
                scene.add( truck_head_chimney1 );
                
                var truck_head_chimney2 = new THREE.Mesh(
                    new THREE.CylinderGeometry( truck_head_chimney_radius, truck_head_chimney_radius, 300, 20 ), 
                    new THREE.MeshBasicMaterial( { color:0xffffff, wireframe:true } )
                );
                truck_head_chimney2.position.x = -100;
                truck_head_chimney2.position.y = 50;
                truck_head_chimney2.position.z = -(container_length/2 + truck_head_chimney_radius/2);
                scene.add( truck_head_chimney2 );
        
                var truck_wheel_1 = new THREE.Mesh(new THREE.CylinderGeometry( 50, 50, 20, 50 ), 
                    new THREE.MeshBasicMaterial( { color:0xffffff, wireframe:true } )
                );
                truck_wheel_1.position.x = 110;
                truck_wheel_1.position.y = -100;
                truck_wheel_1.position.z = -(container_length/2 + truck_head_length_2/2 + 20) ;
                truck_wheel_1.rotation.x = 0;
                truck_wheel_1.rotation.y = 0;
                truck_wheel_1.rotation.z = 1.6;
                scene.add( truck_wheel_1 );
                
                var truck_wheel_2 = new THREE.Mesh(new THREE.CylinderGeometry( 50, 50, 20, 50 ), 
                    new THREE.MeshBasicMaterial( { color:0xffffff, wireframe:true } )
                );
                truck_wheel_2.position.x = -110;
                truck_wheel_2.position.y = -100;
                truck_wheel_2.position.z = -(container_length/2 + truck_head_length_2/2 + 20);
                truck_wheel_2.rotation.x = 0;
                truck_wheel_2.rotation.y = 0;
                truck_wheel_2.rotation.z = 1.6;
                scene.add( truck_wheel_2 );

                offset_2 = -240;
                var truck_wheel_5 = new THREE.Mesh(new THREE.CylinderGeometry( 50, 50, 20, 50 ), 
                    new THREE.MeshBasicMaterial( { color:0xffffff, wireframe:true } )
                );
                truck_wheel_5.position.x = container_width/2 + 5;
                truck_wheel_5.position.y = -100;
                truck_wheel_5.position.z = (container_length/2 + truck_head_length_2/2 + offset_2) ;
                truck_wheel_5.rotation.x = 0;
                truck_wheel_5.rotation.y = 0;
                truck_wheel_5.rotation.z = 1.6;
                scene.add( truck_wheel_5 );

                var truck_wheel_6 = new THREE.Mesh(new THREE.CylinderGeometry( 50, 50, 20, 50 ), 
                    new THREE.MeshBasicMaterial( { color:0xffffff, wireframe:true } )
                );
                truck_wheel_6.position.x = -container_width/2 - 5;
                truck_wheel_6.position.y = -100;
                truck_wheel_6.position.z = (container_length/2 + truck_head_length_2/2 + offset_2);
                truck_wheel_6.rotation.x = 0;
                truck_wheel_6.rotation.y = 0;
                truck_wheel_6.rotation.z = 1.6;
                scene.add( truck_wheel_6 );

                for (var i in objectArray) {
                    if (objectArray[i].type==2) {
						var cylinderTopR = objectArray[i].length / 2;
						var cylinderHeight = objectArray[i].height;
						if (objectArray[i].place == 1 || objectArray[i].place == 2)
						{
							cylinderHeight = objectArray[i].width;
						}
						
                        var object2 = new THREE.Mesh(
						    new THREE.CylinderGeometry(cylinderTopR, cylinderTopR, cylinderHeight, 60),
                            new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff , wireframe:false } ) 
                        ); 
                        object2.position.x = objectArray[i].x;
                        object2.position.y = objectArray[i].y;
                        object2.position.z = objectArray[i].z;
                        if (objectArray[i].place==1) {
                            object2.rotation.z = 55;
                        }
                        if (objectArray[i].place==2) {
                            object2.rotation.x = 55;
                        }
                        object2.width = objectArray[i].width;
                        object2.height = objectArray[i].height;
                        object2.length = objectArray[i].length;
                        object2.weight = objectArray[i].weight;
                        object2.platform = objectArray[i].platform;
                        object2.order = objectArray[i].order;
                        object2.materialInfo = objectArray[i].material;
                        object2.boxId = objectArray[i].boxId;
                        object2.type = objectArray[i].type;
                        object2.place = objectArray[i].place;
                        scene.add( object2 );
                        objects.push( object2 );
                    }
                    if (objectArray[i].type==1) {
						if (objectArray[i].place == 200)
						{
							var box_length = objectArray[i].width;
                            var box_width = objectArray[i].length;
						}
						else
						{
							var box_length = objectArray[i].length;
							var box_width = objectArray[i].width;
						}
						var box_height = objectArray[i].height;
                        var object = new THREE.Mesh(
                            new THREE.BoxGeometry( box_width, box_height, box_length, 1, 1, 1 ), 
                            new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff , wireframe:false } ) 
                        ); 
                        object.position.x = objectArray[i].x;
                        object.position.y = objectArray[i].y;
                        object.position.z = objectArray[i].z;
						object.length = objectArray[i].length;
						object.width = objectArray[i].width;
						object.height = objectArray[i].height;
                        object.weight = objectArray[i].weight;
                        object.platform = objectArray[i].platform;
                        object.order = objectArray[i].order;
                        object.materialInfo = objectArray[i].material;
                        object.boxId = objectArray[i].boxId;
                        object.type = objectArray[i].type;
                        object.place = objectArray[i].place;
                        scene.add( object );
                        objects.push( object );
                    }
                }

                plane = new THREE.Mesh(
                    new THREE.PlaneGeometry( 2000, 2000, 8, 8 ),
                    new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } )
                );
                plane.visible = true;
                scene.add( plane );
                projector = new THREE.Projector();
                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.sortObjects = false;
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.shadowMapEnabled = true;
                renderer.shadowMapType = THREE.PCFShadowMap;
                container.appendChild( renderer.domElement );

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

                window.addEventListener( 'resize', onWindowResize, false );
                renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
                renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
                renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
            }

            function onDocumentMouseMove( event ) {
                event.preventDefault();
                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
                var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
                projector.unprojectVector( vector, camera );
                var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
                var intersects = raycaster.intersectObjects( objects );
                if ( intersects.length > 0 ) {
                    if ( INTERSECTED != intersects[ 0 ].object ) {
                        INTERSECTED = intersects[ 0 ].object;
                        plane.position.copy( INTERSECTED.position );
                        plane.lookAt( camera.position );
                    }
                    container.style.cursor = 'pointer';
                } else {
                    container.style.cursor = 'auto';
                }
            }

            function onDocumentMouseDown( event ) {
                event.preventDefault();
                var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
                projector.unprojectVector( vector, camera );
                var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
                var intersects = raycaster.intersectObjects( objects );
                if ( intersects.length > 0 ) {
                    controls.enabled = false;  
                    SELECTED = intersects[ 0 ].object;
                    var info = '<B>' + 
                        'boxId: ' + SELECTED.boxId +
                        '</br> x: ' + SELECTED.position.x + 
                        '</br> y: ' + SELECTED.position.y + 
                        '</br> z: ' + SELECTED.position.z + 
                        '</br> width: ' + SELECTED.width + 
                        '</br> height: ' + SELECTED.height + 
                        '</br> length: ' + SELECTED.length + 
                        '</br> weight: ' + SELECTED.weight +
                        '</br> platform: ' + SELECTED.platform +
                        '</br> order: ' + SELECTED.order +
                        '</br> material: ' + SELECTED.materialInfo + 
                        '</br> type: ' + SELECTED.type + 
                        '</br> place: ' + SELECTED.place + 
                        '</B>' +
                        '</br>' + 
                        '--------------------------' + 
                        '</br>' +
                        'type(1:箱体 2:圆柱体)' +
                        '</br>' +
                        'place(1:品字型 2:田字型)';
                    $("#objectInfo").html(info);
                }
            }

            function onDocumentMouseUp( event ) {
                event.preventDefault();
                controls.enabled = true;
                if ( INTERSECTED ) {
                    plane.position.copy( INTERSECTED.position );
                    SELECTED = null;
                }
                container.style.cursor = 'auto';
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                stats.update();
            }

            function render() {
                controls.update();
                renderer.render( scene, camera );
            }

        </script>
        <div id="objectInfo" class="a2"><br/>点击物体获取相关属性</div>
        <style>
            .a2{position:absolute; left:20px; top:50px; bottom:0px; width:180px; height:250px; z-index:9999; background: #00FFFF; font-weight:bold; }
        </style>
    </body>
</html>